import * as echarts from '../../components/ec-canvas/echarts';
Page({
    data: {
        ec: {
            lazyLoad: true
        }
    },
    //重新渲染canvas的方法，data为数据源的data
    init:function(data){
        this.lazyComponent = this.selectComponent('#mychart');
        this.lazyComponent.init((canvas, width, height, dpr) => {
            const chart = echarts.init(canvas, null, {
                width: width,
                height: height,
                devicePixelRatio: dpr
            });
            canvas.setChart(chart);
            this.lazyChart = chart;
            var option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        //   name: 'Access From',
                        type: 'pie',
                        radius: '60%',
                        data: data,//返回的数据放到data对应的位置
                        labelLine: {//连接线
                            show: true
                        },
                        label: {//
                            show: true
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            chart.setOption(option);

            return chart;
        });
    },
    onLoad: function (e) {
        
        //假如这里网络请求
                //请求成功，把返回的值放到option对应的位置
                var data=[{
                    value: 55,
                    name: '北京'
                }, {
                    value: 20,
                    name: '武汉'
                }, {
                    value: 10,
                    name: '杭州'
                }, {
                    value: 20,
                    name: '广州'
                }, {
                    value: 38,
                    name: '上海'
                }];
                this.init(data);
        //结束
    },
    tap:function(e){
        var data=[{
            value: Math.floor((Math.random()*20)+1),
            name: '北京'
        }, {
            value: Math.floor((Math.random()*20)+1),
            name: '武汉'
        }, {
            value: Math.floor((Math.random()*20)+1),
            name: '杭州'
        }, {
            value: Math.floor((Math.random()*20)+1),
            name: '广州'
        }, {
            value: Math.floor((Math.random()*20)+1),
            name: '上海'
        }];
        this.init(data);
    },
});
